// POI扩展，poi按钮
import { transform, getTransform } from 'ol/proj' // 坐标转换
import Feature from 'ol/Feature'
import Point from 'ol/geom/Point'
import LineString from 'ol/geom/LineString'
import Polygon from 'ol/geom/Polygon'
import Circle from 'ol/geom/Circle'
import { Circle as CircleStyle, Fill, Icon, Stroke, Style, Text } from 'ol/style'

export default {
  data () {
    return {
      // oMap: null, // 地图对象
      sSRS: 'EPSG:4326', // 空间参照系（Spatial Reference System); 表示使用的数据的坐标系，和地图用的RCS不是同一个
      // FeatureLayer: null, // POI层，所有操作在此组件中完成，故放此处
      // aStyleList: null, // 父类定义的样式列表，POI需要使用，所以初始化时引入！
      // sIconType: 'standard' // 引入mapStyle.js会混入此变量，cardMap也会引入此变量；两者又相同。
      bIconZoom: true, // false, // POI层的图标是否可以缩放；在layerIO中提供设置接口
      oZoomIcon: {} // 如果是可缩放POI，此对象记录已放大的图标信息 {id:气泡信息, id: 气泡信息 ...}
    }
  },
  watch: {
    // watch
  },
  mounted () {
    // mounted
  },
  methods: {
    /**
     * @description 创建文字样式
     * @param  {Object} oText 文字样式
     * @return {Style} textStyle
     */
    createTxtStyle (oText) {
      /*
      "txtStyle": {
        "text": '文字内容',
        "font":"",
        "fill": "#FFF",
        "color": "red",  // strokeColor
        "width": 5, // strokeWidth
        "offsetX": 0,
        "offsetY": 0}
      */
      const sTxt = oText.text
      if (!sTxt) return null // 如果没有文字内容，返回null
      const font = oText.font || '12px 微软雅黑'
      const fill = oText.fill || '#000'
      const strokeColor = oText.color || null
      const strokeWidth = oText.width || 0
      const offsetX = oText.offsetX || 0
      const offsetY = oText.offsetY || 0

      const newStyle = new Text({
        text: sTxt,
        font: font, // 字体与大小'Blod 12px Calibri,sans-serif'
        offsetX: offsetX,
        offsetY: offsetY,
        fill: new Fill({ // 文字填充色
          color: fill
        }),
        stroke: new Stroke({ // 文字边界宽度与颜色
          color: strokeColor,
          width: strokeWidth
        })
      })

      return newStyle
    },

    /**
     * @description 创建Feature并添加到POI图层（创建一个Feature,其type属性根据参数设置，默认为POI）
     * @param oSource {Object} 用来创建feature的一个geojson数据；
     * @param sRCS {String} 表示地图使用的坐标系,如：EPSG:3857
     * @return null
     */
    createFeatureExt_0ld (oSource, sRCS) {
      // 获取当前系统投影
      let poiCoord = null // 此为POI的坐标
      let poiFeature = null // 要创建的Feature
      // 获取数据通用属性
      const bIsFlash = oSource.properties.isFlash || false
      const bIsPop = oSource.properties.isPop || false
      const oBubble = oSource.properties.Bubble || null
      const dClass = oSource.properties.dClass || null // 保留字段
      // 类型字段（新添加，原来所有Feature层创建的都是POI类型，现在可以设置了）
      const sExt = oSource.properties.ext || 'POI'

      // POI为Point(image, circle) ?Text 要单独处理啊吗？（文字都是不同的！！）
      if (oSource.geometry.type === 'Point') {
        // Point类型顶点
        poiCoord = oSource.geometry.coordinates // 获得顶点信息
        // console.log(sRCS !== this.sSRS) // 当前坐标和数据坐标 是否相同
        if (sRCS !== this.sSRS) { // 从数据库中获取POI使用'EPSG:4326'sViewProj.getCode()
          // poiCoord = proj.transform(poiCoord, this.sSRS, sViewProj)
          // 数据是从后台获取的，默认坐标为EPSG4326，当前地图使用坐标sRCS
          poiCoord = transform(poiCoord, this.sSRS, sRCS) // 坐标转换
          // console.log(poiCoord)
        }
        // 生成Poitn的Feature
        poiFeature = new Feature({ // ol.Feature
          geometry: new Point(poiCoord), // ol.geom.Point
          type: sExt, // add for select
          dType: oSource.properties.dType, // 类型：如'指挥机构'  改subclass
          iFlash: bIsFlash,
          iPop: bIsPop,
          dClass: dClass,
          // name: xItem.poiName, // title:"标题world",
          // value: xItem.value,
          Bubble: oBubble
        })

        // poiFeature = this.FeatureLayer.getSource().addFeature(oSource)
        poiFeature.setId(oSource.properties.id)
        // console.log(this.getPOIStyle (oSource.properties))
        poiFeature.setStyle(this.getPOIStyle(oSource.properties))
        // this.FeatureLayer.getSource().addFeature(poiFeature)
        this.poiSource.addFeature(poiFeature)
      }
      // 处理线（LineString）
      if (oSource.geometry.type === 'LineString') {
        // const LineCoord = oSource.geometry.coordinates
        poiCoord = oSource.geometry.coordinates
        const geometry = new LineString(poiCoord)
        if (sRCS !== this.sSRS) {
          // geometry.applyTransform(getTransform('EPSG:4326', sViewProj))
          geometry.applyTransform(getTransform(this.sSRS, sRCS))
        }

        // 创建lineSting Feature
        poiFeature = new Feature({ // ol.Feature
          geometry: geometry, // ol.geom.lineSting
          type: sExt, // add for select
          dType: oSource.properties.dType, // 类型：如'指挥机构'  #由subclass改
          iFlash: bIsFlash,
          dClass: dClass,
          // name: xItem.poiName, // title:"标题world",
          // value: xItem.value,
          Bubble: oBubble
        })

        // poiFeature = this.FeatureLayer.getSource().addFeature(oSource)
        poiFeature.setId(oSource.properties.id)
        // console.log(this.getPOIStyle (oSource.properties))
        poiFeature.setStyle(this.getPOIStyle(oSource.properties))
        // this.FeatureLayer.getSource().addFeature(poiFeature)
        this.poiSource.addFeature(poiFeature)
      }
      // 处理多边形（polygon）数据
      if (oSource.geometry.type === 'Polygon') {
        // 获取多边形顶点信息
        poiCoord = oSource.geometry.coordinates
        const geometry = new Polygon(poiCoord)
        if (sRCS !== this.sSRS) {
          geometry.applyTransform(getTransform(this.sSRS, sRCS)) // ol.proj.getTransform'EPSG:4326'
          console.log(geometry.getCoordinates())
        }
        // 创建多边形 Feature
        poiFeature = new Feature({ // ol.Feature
          geometry: geometry, // ol.geom.lineSting
          type: sExt, // add for select
          dType: oSource.properties.dType, // 类型：如'指挥机构'  #由subclass改
          iFlash: bIsFlash,
          dClass: dClass,
          // name: xItem.poiName, // title:"标题world",
          // value: xItem.value,
          Bubble: oBubble
        })

        // poiFeature = this.FeatureLayer.getSource().addFeature(oSource)
        poiFeature.setId(oSource.properties.id)
        // console.log(this.getPOIStyle (oSource.properties))
        poiFeature.setStyle(this.getPOIStyle(oSource.properties))
        // this.FeatureLayer.getSource().addFeature(poiFeature)
        this.poiSource.addFeature(poiFeature)
      }
      // 处理圆（circle）数据
      // console.log(oSource.geometry.type)
      if (oSource.geometry.type === 'Circle') {
        // 获取圆心坐标
        poiCoord = oSource.geometry.coordinates
        // 数据默认坐标系为EPSG4326，需要先转成EPSG3857，使用半径（米）创建圆形POI
        const geometry = new Circle(transform(poiCoord, this.sSRS, 'EPSG:3857'), oSource.geometry.radius) // proj.transform'EPSG:4326'
        // 圆形需要将'EPSG:3857'坐标系，转换成当前地图坐标系sRCS
        geometry.transform('EPSG:3857', sRCS)
        // 创建Circle
        poiFeature = new Feature({ // ol.Feature
          geometry: geometry, // ol.geom.lineSting
          type: sExt, // add for select
          dType: oSource.properties.dType, // 类型：如'指挥机构'  #由subclass改
          iFlash: bIsFlash,
          dClass: dClass,
          // name: xItem.poiName, // title:"标题world",
          // value: xItem.value,
          Bubble: oBubble
        })
        // 设置featrue的id
        poiFeature.setId(oSource.properties.id)
        poiFeature.setStyle(this.getPOIStyle(oSource.properties)) // 样式设置
        // this.FeatureLayer.getSource().addFeature(poiFeature)
        this.poiSource.addFeature(poiFeature)
      }
    },

    createFeatureExt (oSource, sRCS) {
      // 获取当前系统投影
      let poiCoord = null // 此为POI的坐标
      let poiFeature = null // 要创建的Feature
      // 获取数据通用属性
      const bIsFlash = oSource.properties.isFlash || false
      const bIsPop = oSource.properties.isPop || false
      const oBubble = oSource.properties.Bubble || null
      const dClass = oSource.properties.dClass || null // 保留字段
      // 文字处理
      const oTxt = oSource.properties.txtStyle // 存在的话标识有文字需要处理

      // 类型字段（新添加，原来所有Feature层创建的都是POI类型，现在可以设置了）
      const sExt = oSource.properties.ext || 'POI'

      // POI为Point(image, circle) ?Text 要单独处理啊吗？（文字都是不同的！！）
      if (oSource.geometry.type === 'Point') {
        // Point类型顶点
        poiCoord = oSource.geometry.coordinates // 获得顶点信息
        // console.log(sRCS !== this.sSRS) // 当前坐标和数据坐标 是否相同
        if (sRCS !== this.sSRS) { // 从数据库中获取POI使用'EPSG:4326'sViewProj.getCode()
          // poiCoord = proj.transform(poiCoord, this.sSRS, sViewProj)
          // 数据是从后台获取的，默认坐标为EPSG4326，当前地图使用坐标sRCS
          poiCoord = transform(poiCoord, this.sSRS, sRCS) // 坐标转换
          // console.log(poiCoord)
        }
        // 生成Poitn的Feature
        poiFeature = new Feature({ // ol.Feature
          geometry: new Point(poiCoord), // ol.geom.Point
          type: sExt, // add for select
          dType: oSource.properties.dType, // 类型：如'指挥机构'  改subclass
          iFlash: bIsFlash,
          iPop: bIsPop,
          dClass: dClass,
          // name: xItem.poiName, // title:"标题world",
          // value: xItem.value,
          Bubble: oBubble
        })

        // poiFeature = this.FeatureLayer.getSource().addFeature(oSource)
        poiFeature.setId(oSource.properties.id)
        const poiStyle = this.getPOIStyle(oSource.properties)
        // console.log(this.getPOIStyle (oSource.properties))
        if (oTxt) { // 如果有文字需要处理
          const txtStyle = this.createTxtStyle(oTxt) // 获取POI的图标
          if (txtStyle) { // 成功生成文字样式
            const newStyle = poiStyle.clone() // 克隆当前的图标样式
            newStyle.setText(txtStyle) // 修改图标样式，添加文本信息
            poiFeature.setStyle(newStyle) // 应用新的图标到feature
          }
        } else {
          poiFeature.setStyle(poiStyle)
        }
        // poiFeature.setStyle(this.getPOIStyle(oSource.properties))
        // this.FeatureLayer.getSource().addFeature(poiFeature)
        this.poiSource.addFeature(poiFeature)
      }
      // 处理线（LineString）
      if (oSource.geometry.type === 'LineString') {
        // const LineCoord = oSource.geometry.coordinates
        poiCoord = oSource.geometry.coordinates
        const geometry = new LineString(poiCoord)
        if (sRCS !== this.sSRS) {
          // geometry.applyTransform(getTransform('EPSG:4326', sViewProj))
          geometry.applyTransform(getTransform(this.sSRS, sRCS))
        }

        // 创建lineSting Feature
        poiFeature = new Feature({ // ol.Feature
          geometry: geometry, // ol.geom.lineSting
          type: sExt, // add for select
          dType: oSource.properties.dType, // 类型：如'指挥机构'  #由subclass改
          iFlash: bIsFlash,
          dClass: dClass,
          // name: xItem.poiName, // title:"标题world",
          // value: xItem.value,
          Bubble: oBubble
        })

        // poiFeature = this.FeatureLayer.getSource().addFeature(oSource)
        poiFeature.setId(oSource.properties.id)
        // console.log(this.getPOIStyle (oSource.properties))
        poiFeature.setStyle(this.getPOIStyle(oSource.properties))
        // this.FeatureLayer.getSource().addFeature(poiFeature)
        this.poiSource.addFeature(poiFeature)
      }
      // 处理多边形（polygon）数据
      if (oSource.geometry.type === 'Polygon') {
        // 获取多边形顶点信息
        poiCoord = oSource.geometry.coordinates
        const geometry = new Polygon(poiCoord)
        if (sRCS !== this.sSRS) {
          geometry.applyTransform(getTransform(this.sSRS, sRCS)) // ol.proj.getTransform'EPSG:4326'
          console.log(geometry.getCoordinates())
        }
        // 创建多边形 Feature
        poiFeature = new Feature({ // ol.Feature
          geometry: geometry, // ol.geom.lineSting
          type: sExt, // add for select
          dType: oSource.properties.dType, // 类型：如'指挥机构'  #由subclass改
          iFlash: bIsFlash,
          dClass: dClass,
          // name: xItem.poiName, // title:"标题world",
          // value: xItem.value,
          Bubble: oBubble
        })

        // poiFeature = this.FeatureLayer.getSource().addFeature(oSource)
        poiFeature.setId(oSource.properties.id)
        // console.log(this.getPOIStyle (oSource.properties))
        poiFeature.setStyle(this.getPOIStyle(oSource.properties))
        // this.FeatureLayer.getSource().addFeature(poiFeature)
        this.poiSource.addFeature(poiFeature)
      }
      // 处理圆（circle）数据
      // console.log(oSource.geometry.type)
      if (oSource.geometry.type === 'Circle') {
        // 获取圆心坐标
        poiCoord = oSource.geometry.coordinates
        // 数据默认坐标系为EPSG4326，需要先转成EPSG3857，使用半径（米）创建圆形POI
        const geometry = new Circle(transform(poiCoord, this.sSRS, 'EPSG:3857'), oSource.geometry.radius) // proj.transform'EPSG:4326'
        // 圆形需要将'EPSG:3857'坐标系，转换成当前地图坐标系sRCS
        geometry.transform('EPSG:3857', sRCS)
        // 创建Circle
        poiFeature = new Feature({ // ol.Feature
          geometry: geometry, // ol.geom.lineSting
          type: sExt, // add for select
          dType: oSource.properties.dType, // 类型：如'指挥机构'  #由subclass改
          iFlash: bIsFlash,
          dClass: dClass,
          // name: xItem.poiName, // title:"标题world",
          // value: xItem.value,
          Bubble: oBubble
        })
        // 设置featrue的id
        poiFeature.setId(oSource.properties.id)
        poiFeature.setStyle(this.getPOIStyle(oSource.properties)) // 样式设置
        // this.FeatureLayer.getSource().addFeature(poiFeature)
        this.poiSource.addFeature(poiFeature)
      }
    },

    /**
     * @description 从给定的geojson数据中获取所有的feature
     * @param oSource {Object} 给出的geojson资源数据 -- FeatureCollection
     * @return null
     */
    readFeaturesExt (oSource) {
      // console.log(oSource)
      // 获取地图的坐标系统名称
      // const sMapRCS = this.$parent.conf.RCS
      const sMapRCS = this.oMap.getView().getProjection().getCode()
      // console.log(sMapRCS)
      // 读取解析每个Feature对象
      for (let i = 0; i < oSource.features.length; i++) {
        // this.createFeature(oSource.features[i], bIsConv)
        this.createFeatureExt(oSource.features[i], sMapRCS)
      }
    },

    /**
     * @description 显示POI数据
     * @param  null
     * @return null
     */
    showPOIExt (oResData) {
      if (!oResData || JSON.stringify(oResData) === '{}') {
        return // 没有数据作处理
      }
      // console.log(oResData)
      // 数据代码不为'000000'（成功）退出
      // if (oResData.code !== '000000') return
      // 获取当前系统投影
      // let sourceProj = this.oMap.getView().getProjection()
      // console.log(sourceProj)

      // 循环数据，展示POI
      // 数据dataTypeNum,返回的POI数据，可能有个多种类型的数据[{datType1}, {dataType2}]
      const nDataTypeNum = oResData.length
      // console.log(nDataTypeNum)
      for (let i = 0; i < nDataTypeNum; i++) {
        const oData = oResData[i] // 获取一类数据
        if (oData.style && !(JSON.stringify(oData.style) === '{}')) { // 如果此类数据开头提供了样式Style，可预先导入
        // if (oData.style && oData.style.icon && JSON.stringify(oData.style.icon) !== '{}') { // 目前只预存icon的图片样式，其他类型样式不好统一
          // 如果样式在样式列表中不存在，需要创建样式style':{ 'icon': {'sStyleID':'styleName', 'src': 'X01气泡'}  }
          this.getPOIStyle(oData.style)
        }
        // 绘制图标
        const oGeoJson = oData.geojsonfeatures // 一个数据类型的geojson数据信息
        if (oGeoJson.type === 'FeatureCollection') { // 处理Feature集合
          // console.log(oGeoJson)
          this.readFeaturesExt(oGeoJson)
        }
      }
      // 检查
      // console.log(this.FeatureLayer.getSource().getFeatures())
      console.log(this.poiSource.getFeatures())
    },

    /**
     * @description 设置图标缩放标志位
     * @param  {boolean} isZoom // true可以缩放，false不可缩放
     * @return null
     */
    setIconZoom (isZoom) {
      if (isZoom) {
        this.bIconZoom = true
      } else {
        this.bIconZoom = false
      }
    },
    /**
     * @description 获取图标缩放标志位
     * @param  null
     * @return POI图标缩放标志位
     */
    getIconZoom () {
      return this.bIconZoom
    },
    /**
     * @description 将放大图标的featrue信息保存到oZoomIcon对象中
     * @param  {Object} oFeature 图标变大的featrue对象
     * @return null
     */
    saveBigFeature (oFeature) {
      const sID = oFeature.getId()
      const infos = oFeature.get('Bubble')
      this.oZoomIcon[sID] = infos
      console.log(this.oZoomIcon)
    },
    /**
     * @description 删除图标变大feature在oZoomIcon记录
     * @param  {Object} oFeature 图标变大的featrue对象
     * @return null
     */
    delBigReature (oFeature) {
      const sID = oFeature.getId()
      if (sID in this.oZoomIcon) {
        delete this.oZoomIcon[sID]
        console.log(this.oZoomIcon)
      }
    },
    /**
     * @description 清除所有变大图标
     * @param  {Object} oFeature 图标变大的featrue对象
     * @return {int} iNum 删除数据个数
     */
    clearAllZoomin () {
      const keys = Object.keys(this.oZoomIcon)
      const iNum = keys.length
      for (let i = 0; i < iNum; i++) {
        this.zoomIconByID(keys[i])
      }
      return iNum
    },
    /**
     * @description 获得所有变大数据信息
     * @param
     * @return this.oZoomIcon
     */
    getAllBigInfos () {
      return this.oZoomIcon
    },
    /**
     * @description 缩放图标方法
     * @param  null
     * @return POI图标缩放标志位
     */
    // zoomIcon (feature) {
    //   const feaStyle = feature.getStyle()
    //   const img = feaStyle.getImage()
    //   let sZoom = null
    //   let newSrc = null
    //   if (img instanceof Icon) { // 图标使用的是ICON
    //     const src = img.getSrc() // /mapres/images/icon/standard/X00人防工程.png
    //     const strArr = src.split('.') // 将src分成前后两部分
    //     const sflag = strArr[0].substring(strArr[0].length - 3)
    //     console.log(sflag)
    //     if (sflag.toUpperCase() === 'BIG') {
    //       // 当前图标是大的，需要缩小
    //       sZoom = 'zoomout' // 缩小
    //       newSrc = strArr[0].substr(0, strArr[0].length - 3) + '.' + strArr[1]
    //     } else {
    //       // 当前图标是小的，需要放大
    //       sZoom = 'zoomin' // 缩小
    //       newSrc = strArr[0] + 'BIG.' + strArr[1]
    //     }
    //     console.log(sZoom)
    //     if (sZoom === 'zoomin') {
    //       img.setScale([2, 2])
    //       feaStyle.setImage(img)
    //     } else if (sZoom === 'zoomout') {
    //       img.setScale([1, 1])
    //       feaStyle.setImage(img)
    //     }
    //     feature.changed()
    //     console.log(newSrc)
    //   }
    // }
    zoomIcon_old (feature) {
      console.log('-----------------------------------------------------')
      const feaStyle = feature.getStyle()
      const img = feaStyle.getImage()
      let sZoom = null
      if (img instanceof Icon) { // 图标使用的是ICON
        const iScale = img.getScale()
        console.log('img:', iScale)
        if (iScale === 1) {
          img.setScale(2)
          feaStyle.setImage(img)
          sZoom = 'zoomin'
        } else {
          img.setScale(1)
          feaStyle.setImage(img)
          sZoom = 'zoomout'
        }
        feature.changed()
        return sZoom
      }
    },
    zoomIcon (feature) {
      // console.log(feature.getGeometry().getCoordinates()) // point--feature.getGeometry().getType().toLowerCase()
      const feaStyle = feature.getStyle()
      if (!feaStyle) return // 获取不到样式退出
      const img = feaStyle.getImage()
      let sZoom = null
      if (img instanceof Icon) { // 图标使用的是ICON
        const iScale = img.getScale()
        // console.log('img:', iScale)
        if (iScale === 1) { // 原始尺寸，大
          img.setScale(0.5) // 将图标变成原来的一；缩小
          feaStyle.setImage(img)
          sZoom = 'zoomout'
          this.delBigReature(feature) // 删除变大feature信息
        } else {
          img.setScale(1) // 设置为原始尺寸；变大
          feaStyle.setImage(img)
          sZoom = 'zoomin'
          this.saveBigFeature(feature) // 保存变大feature信息
        }
        feature.changed()
        return sZoom
      }
    },
    /**
     * @description 根据给定的featureID缩放图标
     * @param  {String} sID
     * @return {String} sZoom POI图标缩放标志位 zoomin zoomout
     */
    zoomIconByID (sID) {
      const oFeature = this.poiSource.getFeatureById(sID)
      let sZoom // 保存缩放操作结果，放大或缩小
      if (oFeature) {
        sZoom = this.zoomIcon(oFeature)
        return sZoom
      }
    },
    getPoiByID (gID) {
      if (!this.poiSource) return
      return this.poiSource.getFeatureById(gID)
    }
    // 最后尾
  }
}
